<template>
  <el-drawer v-model="showDialog" title="直推订单" destroy-on-close>
    <el-table :data="tableData.data" size="large" v-loading="tableData.loading">
      <el-table-column label="来源用户" min-width="150" show-overflow-tooltip align="center">
        <template #default="{ row }">
          <div class="flex flex-col items-center justify-center">
            <img
              class="w-[50px] h-[50px] mr-[10px] border border-solid border-gray-50"
              :src="row.sourceUser.avatar || '/avatar.png'"
              alt=""
            />
            <span>{{ row.sourceUser.nickname || '匿名' }}</span>
            <span>{{ row.sourceUser.mobile || '未绑定手机号' }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="基准金额" min-width="100">
        <template #default="{ row }">
          <el-tooltip :content="'关联单号：' + row.bizId">
            <span class="text-orange-500">¥{{ fenToYuan(row.basePrice) }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="分佣比例" min-width="100">
        <template #default="{ row }">
          <span>{{ row.bonusPercent }}%</span>
        </template>
      </el-table-column>
      <el-table-column label="分佣金额" min-width="100">
        <template #default="{ row }">
          <span class="text-orange-500">¥{{ fenToYuan(row.bonusMoney) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="说明" min-width="220" align="left">
        <template #default="{ row }">
          <div class="multi-hidden">
            {{ row.note }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="状态" min-width="100" align="center" fixed="right">
        <template #default="{ row }">
          <el-tag v-if="row.status == 1" type="success">已结算</el-tag>
          <el-tag v-else-if="row.status == 2" type="warning">已失效</el-tag>
          <el-tag v-else-if="row.status == 3" type="warning">已取消</el-tag>
          <el-tooltip v-else :content="'将于' + formatTime(row.unfreezeTime) + '自动结算'">
            <el-tag type="primary">待结算</el-tag>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <Pagination
      v-model:limit="tableData.searchParam.pageSize"
      v-model:page="tableData.searchParam.pageNo"
      :total="tableData.total"
      @pagination="loadTableData"
    />
  </el-drawer>
</template>

<script lang="ts" setup>
import { getPage } from '@/api/brokerage/record'
import { fenToYuan, formatTime } from '@/utils'

const showDialog = ref(false)

const tableData = reactive({
  total: 0,
  loading: true,
  data: [],
  searchParam: {
    pageNo: 1,
    pageSize: 10,
    userId: '',
    bonusLevel: ''
  }
})

const loadTableData = () => {
  tableData.loading = true
  getPage({
    ...tableData.searchParam
  })
    .then((res) => {
      tableData.loading = false
      tableData.data = res.list
      tableData.total = res.total
    })
    .catch(() => {
      tableData.loading = false
    })
}

const setInitData = async (row: any = null) => {
  if (row) {
    tableData.searchParam.pageNo = 1
    tableData.searchParam.userId = row.userId
    tableData.searchParam.bonusLevel = '1'
    loadTableData()
  }
}

defineExpose({
  showDialog,
  setInitData
})
</script>
